<template>
	<div>
		<div>
			<span>
				<el-input style='width:200px' size='mini' v-model='filter.orderNo' placeholder='订单号'></el-input>
			</span>
			<span class='m-l-10'>
				<span>时间</span>
				<el-date-picker
					style='width:250px'
					class='m-l-10'
					size='mini'
				  v-model='filter.date'
				  type='daterange'
				  align='right'
				  unlink-panels
				  range-separator='-'
				  value-format="yyyy-MM-dd"
				  start-placeholder='开始日期'
				  end-placeholder='结束日期'>
				</el-date-picker>
			</span>
			<el-button class='m-l-10' size='mini' type='primary' icon='el-icon-search' @click='search'>搜索</el-button>
		</div>
		<section class='m-t-50'>
			<div id='toggle-list-btn'>
				<a href='javascript:;' class='item' :class='{selected : orderType == 1}' @click='$emit("toggleList", 1)'>充电订单</a>
				<a href='javascript:;' class='item'  :class='{selected : orderType == 2}' @click='$emit("toggleList", 2)'>充值订单</a>
			</div>
			<el-table class='f-12 m-t-20' ref='multipleTable' :data='orderList'>
				<el-table-column label='订单号' align='center'>
					<template slot-scope='scope'>{{ scope.row.orderNo }}</template>
				</el-table-column>
				<el-table-column label='支付方式' align='center' width='80'>
					<template slot-scope='scope'>{{ payTypeList[scope.row.payType] }}</template>
				</el-table-column>
				<template v-if='orderType == 1'>
					<el-table-column label='订单归属账号' align='center'>
						<template slot-scope='scope'>{{ scope.row.affiliation }}</template>
					</el-table-column>
					<el-table-column label='设备号' align='center'>
						<template slot-scope='scope'>{{ scope.row.deviceNo}}</template>
					</el-table-column>
					<el-table-column label='订单完成时间' align='center'>
						<template slot-scope='scope'>{{ scope.row.chargeEndTime}}</template>
					</el-table-column>
					<el-table-column label='充电时长' align='center'>
						<template slot-scope='scope'>{{ scope.row.consumeTime}}</template>
					</el-table-column>
					<el-table-column label='实付金额' align='center'>
						<template slot-scope='scope'>{{ scope.row.actuallyAmount}}</template>
					</el-table-column>
				</template>
				
				<template v-if='orderType == 2'>
					<el-table-column label='充值归属账号' align='center'>
						<template slot-scope='scope'>{{ scope.row.affiliation }}</template>
					</el-table-column>
					<el-table-column label='充值时间' align='center'>
						<template slot-scope='scope'>{{ scope.row.rechargeTime}}</template>
					</el-table-column>
					<el-table-column label='充值金额' align='center'>
						<template slot-scope='scope'>{{ scope.row.rechargeAmount}}</template>
					</el-table-column>
				</template>
			</el-table>
			
			<div class='m-t-30'>
				<pagination ref='pagination' :query='pageQuery' v-on:page='orderList = $event' :url='orderType == 1 ? "user/getUserChargeOrder" : "user/getUserRechargeOrder"'></pagination>
			</div>
			
		</section>
		
	</div>
</template>

<script>
	import pagination from '@/components/pagination.vue'
	import { getDate } from '@/utils'
	import { payType } from '@/config'
	
	export default {
		props : {
			orderType : 1
		},
		data () {
			return {
				payTypeList : payType,
				filter : {
					orderNo : '',
					userId : 0,
					date : []
				}, 
				
				pageQuery : {
					userId : 0,
					startDate : '',
					endDate : ''
				},
				
				orderList : []
			}
		},
		
		components : {
			pagination
		},
		
		methods : {
			search : function(){
				let filter = Object.assign({}, this.filter)
				
				let date = filter.date
				if(date){
					filter.startDate = date[0]
					filter.endDate = date[1]
				}
				
				delete filter.date
				
				this.pageQuery = Object.assign({}, filter)
				
				this.$nextTick(() => {
					this.$refs.pagination.initPage()
				})
	
			}
		},
		
		created () {
			let d1 = getDate(-7)
			let d2 = getDate()
			this.filter.date = [d1, d2]
			this.pageQuery.startDate = d1
			this.pageQuery.endDate = d2
			
			
			
			let userId = this.$route.params.userId
			this.filter.userId = userId
			this.pageQuery.userId = userId
		}
	}
</script>

<style lang='less' scoped>
	#toggle-list-btn{
		width:200px;
		border:1px solid #ebeef5;
		border-radius:5px;
		display:flex;
		.item{
			font-size:12px;
			flex:1;
			line-height:30px;
			text-align:center;
			&.selected{
				color:#FFFFFF;
				background:linear-gradient(to right, rgb(110,156,254), rgb(110,195,254))
			}
		}
	}
</style>